<template>
  <div class="person">
    <!-- 
      09 watch监听器
        watch监听器
        作用: 监听数据的变化
        特点: Vue3中的watch只能监听一下4中数据

        1.ref定义的数据
        2.reactive定义的数据
        3.函数返回一个值(getter函数)
        4.一个包含上述内容的数组
     -->
     <h1>情况1: 监视 ref定义的基本类型数据</h1>
     <h2>当前求和为: {{ sum }}</h2>
     <button @click="changeSum">点击加一</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, watch } from 'vue'

let sum = ref(0)

const changeSum = () => {
  sum.value +=1
}

// 监视 不需要sum.value 能监视的只有4中情况 不包含.value这种情况
// 监视ref定义的 基本类型数据 时, 直接写数据名即可,监视的事value值的改变
// newV oldV是不同的值
const stopWatch = watch(sum, (newV, oldV)=> {
  console.log('sum变化了', newV, oldV)
  if(newV >= 10) {
    stopWatch()
  }
})


</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>